<template>
  <section class="wrapper_0309">
    <myHeader class="header" :obj="myObj" @events="events"></myHeader>
    <main class="main_0309" v-if="datalist">
      <div class="bigFace" :style="{background:'url('+ datalist.PicUrl +') no-repeat center'}">
        <praise-bar></praise-bar>
        <div class="taglist">
          <ul>
            <li v-for="tag in datalist.Tallys">{{tag}}</li>
          </ul>
        </div>
        <div class="info_0309">
          <p class="p_0309">{{datalist.Title}}</p>
            <div class="moneyWrap_0309" @click="toSwiper(datalist.AskToSeeId)" v-if="datalist.Type!==0">
              <span class="money_0309">￥{{datalist.Money}}</span>
              <span class="moneyText_0309">购买预约</span>
            </div>
            <div class="moneyWrap_0309" @click="toHomeSwiper(datalist)" v-else-if="datalist.IsApplys">
              <span class="money_0309">￥{{datalist.Money.toFixed(2)}}</span>
              <span class="moneyText_0309">推荐/自荐</span>
            </div>
        </div>
      </div>
      <div class="posTime_0309" v-if="(datalist.Location||datalist.SeeTime)&&datalist.Type==0 ">
        <div class="item_0309">
          <label class="label_0309">约见地点</label>
          <span class="itemSpan_0309">{{datalist.Location}}</span>
        </div>
        <div class="item_0309">
          <label class="label_0309">约见时间</label>
          <span class="itemSpan_0309">{{datalist.SeeTime}}</span>
        </div>
      </div>
      <article class="articles_0309">
        <h2 class="h2_0309">话题详情</h2>
        <p class="articleText_0309">{{datalist.Describe}}</p>

      </article>
      <div class="comment_0309">
        <h2 class="h2_0309">用户评价</h2>
        <div class="userItem_0309" v-for="item in comlist">
          <div class="faceName_0309">
            <i class="face_0309" :style="{background:'url('+ item.FromHeadUrl +') no-repeat center center'}"></i>
            <span class="name_0309">{{item.FromName}}</span>
          </div>
          <p class="userSay_0309">{{item.Content}}</p>
          <div class="chatTitle_0309">{{item.CreateTime.slice(0,10)}}</div>
          <time class="chatTime_0309">{{item.Time}}</time>
        </div>
        <button class="chatBottom_0309">{{comlist.length < 9?"":"查看全部评论"}}</button>
      </div>
    </main>
  </section>
</template>
<script>
import myHeader from './base/myHeader';
import praiseBar from './base/praiseBar';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/asktoses';
import { fetch } from '../assets/api';
export default {
  data () {
    return {
      myObj: { // header 组件接收的数据
        type: 2,
        text: "行家"
      },
      datalist:null,
      comlist:{},
      loginData:null,
      Isapply:false,
    }
  },
  props:{
    index:{

    }
  },
  created (){
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      let storeData = this.$store.state.detailDatas.MessageDetails;
      this.Isapply = this.$store.state.detailDatas.IsApplys;
      this.datalist = storeData[this.index];
      this.commentlist();
      console.log("ssss",this.datalist)
    });
    
  },
  methods: {
    events(i){
      if(i == 2) {
        this.$store.commit('boxShow', false);
        let clickObj = this.$store.state.clickObj;
        if(clickObj&&clickObj.goBack){
          history.back();
        }
      }
    },
    // 跳到轮播页面
    toSwiper(infoId) {
      this.$router.push({ path: "/editIndent", query: { AskToSeeId:infoId } });
    },
    // 跳到轮播页面
    toHomeSwiper(infoId) {
      if (infoId.AskToSeeId) {
        this.$router.push({ path: "/recommen", query: { AskToSeeId:infoId.AskToSeeId,pic:infoId.PicUrl} });
      } else {
        this.$router.push({ path: "/editIndent", query: { PostMesssageDetailId:infoId.PostMesssageDetailId,title:infoId.Title,Money:infoId.Money } });
      }
      
    },
    //评论
    async commentlist(){
      if(this.datalist.AskToSeeId){
        const res = await fetch(API.getcommentlist,{
          ...this.loginData[1],
          AskToSeeId: this.datalist.AskToSeeId,
          PageIndex:1
        });
        //console.log("评论",res)
        this.comlist = res.Result.Comments;
      } else {
        const res = await fetch(API.GetPostComment,{
          ...this.loginData[1],
          PostMesssageDetailId: this.datalist.PostMesssageDetailId,
          PageIndex:1
        });
        this.comlist = res.Result.Comments;
      }
    },
  },
  components: {
    myHeader,praiseBar
  }
}

</script>
<style lang="less">
  .wrapper_0309 {
    width: 3.75rem;
    .main_0309 {
      width: 3.75rem;
      height: 100%;
      padding-top: .44rem;
      position: absolute;
      top: 0;
      left: 0;
      overflow-y: auto;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
      .comment_0309 {
        padding: .14rem;
        background: white;
        .userItem_0309 {
          padding-top: .14rem;
          box-sizing: border-box;
          .faceName_0309 {
            width: 100%;
            display: flex;
            margin-bottom: .12rem;
            .face_0309 {
              display: block;
              width: .3rem;
              height: .3rem;
              background: url("../assets/img/my@3x.png") center center;
              background-size: cover !important;
              background-repeat: no-repeat;
              border-radius: 50%;
            }
            .name_0309 {
              display: block;
              width: 3rem;
              height: .3rem;
              line-height: .3rem;
              padding-left: .1rem;
              box-sizing: border-box;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              color: #39393D;
              font-size: .12rem;
              font-weight: bold;
            }
          }
          .userSay_0309 {
            color: #39393D;
            font-size: .12rem;
            line-height: 1.5;
            text-align: justify;
          }
          .chatTitle_0309 {
            font-size: .12rem;
            line-height: .12rem;
            color: #828282;
            padding: .1rem 0;
          }
          .chatTime_0309 {
            font-size: .12rem;
            color: #828282;
          }
        }
        .chatBottom_0309 {
          display: block;
          width: 3.47rem;
          height: .44rem;
          font-size: .12rem;
          color:#39393D;
          border: none;
          background: white;
          border-top: .01rem solid #D8D8D8;
        }


      }
      .h2_0309 {
          color: #39393D;
          font-size: .14rem;
          padding-bottom: .1rem;
        }
      .articles_0309 {
        background: white;
        padding: .14rem;
        box-sizing: border-box;
        margin-bottom: .14rem;
        .articleText_0309 {
          color: #828282;
          font-size: .12rem;
          text-align: justify;
          line-height: .16rem;
          

        }
      }
      .posTime_0309 {
        width: 3.75rem;
        padding: .18rem .14rem;
        height: .88rem;
        background: white;
        box-sizing: border-box;
        display: flex;
        .item_0309 {
          width: 1.73rem;
          &:nth-last-child(1){
              border-left: 0.01rem solid #E5E5E5;
            }
            .label_0309 {
              display: block;
              height: .26rem;
              line-height: .26rem;
              color: #353535;
              font-size: .14rem;
              font-weight: bold;
              text-align: center;
            }
            .itemSpan_0309 {
              display: block;
              width: 1.73rem;
              height: .26rem;
              line-height: .26rem;
              text-align: center;
              color: #828282;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
        }
      }
      .bigFace {
        width: 100%;
        height: 5.24rem;
        background: url("../assets/img/person/2.jpg") no-repeat center;
        background-size: cover !important;
        position: relative;
        border-bottom: 1px solid #ddd;
        .taglist{
          position: absolute;
          height: 2rem;
          left: 0;
          width: 100%;
          top: 1rem;
          z-index: 1;
          li{
            position: absolute;
            padding: 0.05rem 0.1rem;
            border-radius: 0.08rem;
            color: #C79141;
            background-color: #FCE5BA;
            top: 2rem;
            left: 1.5rem;
            display: inline-block;
            &:nth-of-type(2){
              top: .2rem;
              left: 0.4rem;
              background-color: #A8AED4;
              color: #2667B2;
            }
            &:nth-of-type(3){
              top: 0.8rem;
              left: 2.8rem;
              background-color: #AEE0C7;
              color: #1C7505;
            }
          }
        }
        .info_0309 {
          width: 3.75rem;
          min-height: .6rem;
          position: absolute;
          left: 0;
          bottom: 0;
          background:rgba(0, 0, 0, .2);
          // background: white;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 .14rem;
          box-sizing: border-box;
          .p_0309 {
            width: 2rem;
            height: .22rem;
            line-height: .22rem;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            font-size: .18rem;
            color:white;
            font-weight: bold;
          }
          .moneyWrap_0309 {
            .money_0309 {
              font-size: .2rem;
              font-weight: bold;
              height: .3rem;
              line-height: .3rem;
              color: #39393D;
              display: inline-block;
              background: #EFEFEF;
              padding: 0 .15rem;
              border-radius: .15rem;
            }
            .moneyText_0309 {
              padding-top: .05rem;
              display: block;
              text-align: center;
              font-size: .09rem;
              color: #fff;
              box-sizing: border-box;
            }

          }
        }
      }
    }


  }
</style>
